<template>
  <div>
    <!-- 基本信息 -->
    <basic-container>
      <crud-title :title="'基本信息'" shadow="hover" />
      <avue-form v-loading="loading" ref="form" :option="option" v-model="form">
        <template slot="classifyCode">
          <material-classify v-model="form.classifyCode" :disabled="['view'].includes(type)" @change="checkName" />
        </template>
      </avue-form>
    </basic-container>
    <basic-container shadow="hover">
      <curd-title :title="'原料信息'" />
      <avue-crud
        :table-loading="loading"
        :option="templateOption"
        :data="data"
        v-model="templateForm"
        :before-open="beforeOpen"
        @on-load="onLoad"
        @row-save="rowSave"
        @row-update="rowUpdate"
        @refresh-change="refreshChange"
        @row-del="rowDel"
      >
        <!-- <template slot="postCadreForm">
          <leading v-model="templateForm.postCadre" />
        </template> -->
        <template slot="principalForm">
          <leading v-model="templateForm.principal" />
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
import CrudTitle from '@/components/base/title'
import { option, templateOption } from '@/option/tenant/supplier/sample-template-form'
import { submit, detail } from '@/api/supplier/sampletemplate'
import { getDeptTree, getDeptLazyTree } from '@/api/system/dept'
import website from '@/config/website'
export default {
  name: 'SampleTemplateForm',
  props: ['type', 'param'],
  components: { CrudTitle },
  data() {
    return {
      form: {},
      loading: false,
      option: option.call(this),
      templateOption: templateOption.call(this),
      data: [],
      templateForm: {}
    }
  },
  mounted() {
    if (['edit', 'view'].includes(this.type)) return this.getInfo(this.param.id)
  },
  methods: {
    checkName(val) {
      this.form.classifyName = val
    },
    getInfo(id) {
      try {
        detail(id).then(res => {
          this.form = Object.assign(res.data.data, { classifyCode: res.data.data.classifyCode.split('/') })
          this.data = this.form.dtList
        })
      } catch (error) {
        console.log(error)
      }
    },
    beforeOpen(done, type) {
      this.getDept()
      done()
    },
    getDept() {
      getDeptTree(website.tenantId).then(res => {
        const column = this.findObject(this.templateOption.column, 'dept')
        column.dicData = res.data.data
      })
    },
    onLoad() {},
    refreshChange() {
      this.onLoad()
    },
    rowSave(row, done, loading) {
      this.data.push(Object.assign({}, row))
      done()
    },
    rowUpdate(row,index,done){
      done(row)
    },
    rowDel(row) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          console.log(row)
          this.data.splice(row.$index, 1)
        })
        .then(() => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        })
    },
    handleSave() {
      this.$refs.form.validate(valid => {
        if (valid) {
          let data = {
            ...Object.assign(this.form, { classifyCode: this.form.classifyCode.join('/') }),
            dtList: this.data
          }
          submit(data).then(() => {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this.$emit('update:visible', false)
            this.$emit('refresh')
          })
        }
      })
    },
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          let data = {
            ...Object.assign(this.form, { classifyCode: this.form.classifyCode.join('/') }),
            dtList: this.data
          }
          submit(data).then(() => {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this.$emit('update:visible', false)
            this.$emit('refresh')
          })
        }
      })
    }
  }
}
</script>

<style></style>
